<template>
	<view>
		<!-- 		<uni-nav-bar
			v-if="isInIndex"
			title="订单"
			color="white"
			:border="false"
			:fixed="true"
			:status-bar="true"
			backgroundColor="#0BC5AE">
			</uni-nav-bar> -->
		<view class="main-container">
			<view class="top-tab-bar">
				<view @click="tabClick(item, index)" :class="current === index ? 'tab-item-selected' : ''" class="tab-item"
					v-for="(item, index) in tabs">
					{{ item }}
				</view>
			</view>

			<view class="order-card" v-for="(item, index) in list" @click="navToDetails(item)">
				<view class="time-and-status">
					<view class="time">{{ item.orderNum }}</view>
					<view class="status">{{ item.status }}</view>
				</view>
				<view class="project-row" v-for="itemInfo in item.itemInfos">
					<image :src="itemInfo.serviceItemImg" class="img"></image>
					<view class="name">{{ itemInfo.serviceItem }}</view>
				</view>
				<view class="info-row">
					<view class="name">就诊人</view>
					<view class="value">{{ item.visitor }}</view>
				</view>
				<view class="info-row">
					<view class="name">服务时间</view>
					<view class="value">{{ item.serviceTime || "" }}</view>
				</view>
				<view class="div-line" />
				<view class="price-and-pay">
					<view class="left">
						总价:
						<cn-money :money="Number.parseFloat(item.orderAmount)" :size="48">
						</cn-money>
					</view>
					<view class="cancel-btn" @click.stop="cancelOrder(item)" v-if="
						['待支付'].includes(item.status)
					">
						取消订单
					</view>
					<view class="cancel-btn" @click.stop="navToApplyRefund(item)" v-if="
						['待评估', '待出发', '待派发', '待服务'].includes(item.status)
					">
						取消订单
					</view>
					<view class="cancel-btn" @click.stop="navToMaterialInfo(item)">
						耗材
					</view>
					<view class="ok-btn" v-if="['待支付','服务中添加'].includes(item.status)">
						去付款
					</view>
					<view class="ok-btn" v-if="['结束待确认'].includes(item.status)">
						评价
					</view>
					<view class="ok-btn" v-if="['结束待确认'].includes(item.status)">
						确认结束
					</view>
					<view class="ok-btn" v-if="false"> 退款 </view>
					<view class="del-btn" @click.stop="del(item)" v-if="false">删除</view>
				</view>
				<template v-if="item.status === '服务中' && item.materialOrderInfo != null">
					<view class="div-line"></view>
					<view class="consumable-view">
						<view class="row row-2">
							<view class="left">医用耗材</view>
							<view class="right"><text style="color: red">{{
								item.materialOrderInfo.status
							}}</text>
							</view>
						</view>
						<view class="row row-2">
							<view class="left">耗材种类</view>
							<view class="right">{{
								item.materialOrderInfo.materialCnt
							}}</view>
						</view>
						<view class="row row-2">
							<view class="left">
								总价:
								<cn-money :size="30" :money="getTotalAmount(item.materialOrderInfo.totalAmount)"></cn-money>
							</view>
							<view class="btn" @click.stop="navToConsumable(item)" v-if="item.materialOrderInfo.status === '待支付'">
								去支付
							</view>
							<view class="btn" @click.stop="navToConsumable(item)" v-else>
								查看耗材
							</view>
						</view>
					</view>
				</template>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import * as orderInfo from "../../common/api/orderInfo.js";
	import PageInfo from "../../utils/pageutils.js";
	import cnMoney from "../../components/cn-money/cn-money";
	export default {
		props: {
			isInIndex: false,
		},
		components: {
			cnMoney,
		},
		data() {
			return {
				tabs: [
					"全部",
					"服务中添加",
					"待支付",
					"待审核",
					"待出发",
					"待服务",
					"服务中",
					"结束待确认",
					"待评价",
					"已完成",
					"退款/售后",
					"已取消",
				],
				current: 0,
				list: [],
				status: "",
				orderStatus: "全部", //支付状态
				status: "", //状态
				pageInfo: new PageInfo(),
				readForm: {},
				timer: null,
			};
		},
		onLoad(opt) {
			if (opt.type) {
				this.tabs.forEach((item, index) => {
					if (item === opt.type) {
						this.current = index;
						this.orderStatus = opt.type;
					}
				});
				const typeReadMap = {
					待支付: "paidIsRead",
					待审核: "checkIsRead",
					待出发: "setOutIsRead",
					待服务: "serviceIsRead",
				};
				this.readForm[typeReadMap[opt.type]] = "否";
			}
		},
		beforeDestroy() {
			clearTimeout(this.timer);
			this.timer = null;
		},
		mounted() {
			this.refresh();
			this.timing();
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onReachBottom() {
			this.loadMore();
		},

		computed: {
			showDelBtn() {
				if (process.env.NODE_ENV === "development") {
					//console.log('开发环境');
					return true;
				} else {
					//console.log('生产环境');
					return false;
				}
			},
		},
		methods: {
			tabClick(item, index) {
				this.current = index;
				this.orderStatus = item;
				this.refresh();
			},
			refresh() {
				this.pageInfo.reset();
				this.list = [];
				this.status = "loading";
				this.getList();
			},
			loadMore() {
				if (this.pageInfo.isNotLoadAll) {
					this.status = "loading";
					this.pageInfo.nextPage();
					this.getList();
				} else {
					this.status = "noMore";
				}
			},
			timing() {
				this.timer = setInterval(() => {
					this.refresh();
				}, 60000);
			},
			getList() {
				const param = {
					pageIndex: this.pageInfo.pageIndex,
					pageSize: this.pageInfo.pageSize,
					wxOpenid: uni.getStorageSync("openid_key"),
					...this.readForm,
				};
				if (this.orderStatus === "全部") {
					param.statusList = [
						"待评估",
						"待支付",
						"待出发",
						"待服务",
						"服务中",
						"结束待确认",
						"待评价",
						"已完成",
						"待退款",
						"退款中",
						"已退款",
						"已拒绝",
					];
				} else if (this.orderStatus === "退款/售后") {
					param.statusList = ["待退款", "退款中", "已退款", "已拒绝"];
				} else if (this.orderStatus === "待审核") {
					param.status = "待评估";
				} else if (this.orderStatus === "待评价") {
					param.statusList = ["结束待确认", "已完成"];
					param.isEvaluate = "否";
				} else {
					param.status = this.orderStatus;
				}
				orderInfo
					.queryByPage(param)
					.then((result) => {
						const list = result.data.data.rows || [];
						const total = result.data.data.total;
						this.list = [...this.list, ...list];
						this.pageInfo.total = total;
						this.pageInfo.loadedTotal = this.list.length;
						setTimeout(() => {
							if (this.pageInfo.isNotLoadAll) {
								this.status = "more";
							} else {
								this.status = "noMore";
							}
							uni.stopPullDownRefresh();
						}, 1000);
					})
					.catch((error) => {
						console.log(error);
					});
			},
			navToDetails(item) {
				uni.navigateTo({
					url: "/patientAppPages/pages/orderDetails/orderDetails?uid=" + item.uid,
				});
			},
			navToApplyRefund(item) {
				uni.navigateTo({
					url: "/patientAppPages/pages/applyRefund/applyRefund?uid=" + item.uid,
				});
			},
			cancelOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认取消订单？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							const param = {
								uid: item.uid,
								status: '已取消'
							}
							orderInfo.update(param).then(result => {
								this.refresh()
							}).catch(error => {
								console.log(error);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			del(item) {
				uni.showModal({
					title: "确认删除",
					content: "确认删除数据",
					success(res) {
						if (res.confirm) {
							const param = {
								uid: item.uid,
							};
							orderInfo
								.deleteById(param)
								.then((result) => {
									uni.showToast({
										title: "删除成功",
									});
									this.refresh();
								})
								.catch((error) => {
									console.log(error);
								});
						}
					},
				});
			},
			navToConsumable(item) {
				uni.navigateTo({
					url: "/patientAppPages/pages/consumableList/consumableList?mOrderNum=" +
						item.materialOrderNum,
				});
			},
			getTotalAmount(val) {
				if (!val) {
					return 0;
				}
				return Number.parseFloat(val);
			},
			navToMaterialInfo(item) {
				uni.navigateTo({
					url: "/patientAppPages/pages/consumable/consumable?uid=" + item.uid,
				});
			},
		},
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	page {
		background: #f9f9f9;
	}

	.main-container {
		display: flex;
		flex-direction: column;
	}

	.top-tab-bar {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(auto-fit, 150rpx);
		grid-template-rows: repeat(auto-fit, 66rpx);
		grid-column-gap: 20rpx;
		grid-row-gap: 26rpx;
		background: #f9f9f9;

		// position: sticky;
		// top: 0;
		// z-index: 2;
		.tab-item {
			width: 150rpx;
			height: 66rpx;
			background: #f1f1f1;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(35, 35, 35, 0.8);
			font-size: 26rpx;
		}

		.tab-item-selected {
			background: #dff0ef;
			color: #0bc5ae;
		}
	}

	.order-card {
		margin-right: 30rpx;
		margin-left: 30rpx;
		background: white;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.time-and-status {
			display: flex;

			.time {
				flex: 1;
				color: rgba(35, 35, 35, 0.7);
				font-size: 26rpx;
			}

			.status {
				font-size: 30rpx;
				color: #f5803d;
			}
		}

		.project-row {
			display: flex;
			align-items: center;
			margin-top: 36rpx;

			.img {
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
			}

			.name {
				color: #232323;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 24rpx;
			}
		}

		.info-row {
			display: flex;
			margin-top: 40rpx;

			.name {
				width: 136rpx;
				color: rgba(35, 35, 35, 0.7);
				font-size: 26rpx;
			}

			.value {
				color: #232323;
				font-size: 26rpx;
			}
		}

		.div-line {
			width: 100%;
			height: 2rpx;
			background: #f8f8f8;
			margin-top: 40rpx;
		}

		.price-and-pay {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.left {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.cancel-btn {
				width: 150rpx;
				height: 60rpx;
				border: solid 2rpx rgba(35, 35, 35, 0.26);
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(35, 35, 35, 0.8);
				font-size: 26rpx;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}

			.ok-btn {
				width: 150rpx;
				height: 60rpx;
				border: solid 2rpx #0bc5ae;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #0bc5ae;
				font-size: 26rpx;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	.del-btn {
		width: 60rpx;
		height: 40rpx;
		border: solid 2rpx #c5070a;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c5070a;
		font-size: 14rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
	}

	.consumable-view {
		margin-top: 10rpx;

		.row {
			display: flex;
			align-items: center;
			min-height: 80rpx;
		}

		.row-2 {
			justify-content: space-between;
		}

		.left {
			width: 156rpx;
			font-size: 26rpx;
			color: rgba(35, 35, 35, 0.7);
		}

		.right {
			color: #232323;
			font-size: 26rpx;
			margin-left: 20rpx;
		}

		.btn {
			border: solid 2rpx #0bc5ae;
			color: #0bc5ae;
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 60rpx;
		}
	}
</style>